<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户综合查询</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container { margin-top: 30px; }
        .result-area { margin-top: 20px; }
        .role-badge { margin-right: 5px; }
        .menu-item { font-size: 0.85rem; margin-right: 8px; }
    </style>
</head>
<body>
<div class="container">
    <h2>任务三：用户综合查询（带角色和权限信息）</h2>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">用户综合查询</li>
        </ol>
    </nav>

    <!-- 查询表单 -->
    <div class="card">
        <div class="card-body">
            <form method="get" action="/user/comprehensive">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="username" class="form-label">用户名（模糊）</label>
                        <input type="text" class="form-control" id="username" name="username"
                               th:value="${query != null ? query.username : ''}" placeholder="请输入用户名">
                    </div>
                    <div class="col-md-4">
                        <label for="email" class="form-label">邮箱（模糊）</label>
                        <input type="email" class="form-control" id="email" name="email"
                               th:value="${query != null ? query.email : ''}" placeholder="请输入邮箱">
                    </div>
                    <div class="col-md-2">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">全部</option>
                            <option value="0" th:selected="${query != null and query.status == 0}">正常</option>
                            <option value="1" th:selected="${query != null and query.status == 1}">禁用</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-info w-100">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 查询结果区域 -->
    <div class="result-area">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5>查询结果</h5>
            <span class="text-muted" th:text="${'共 ' + total + ' 条记录'}">共 0 条记录</span>
        </div>

        <!-- 结果表格 -->
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>角色</th>
                        <th>权限菜单</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 循环展示用户列表 -->
                    <tr th:each="user : ${userList}">
                        <td th:text="${user.id}">1</td>
                        <td th:text="${user.loginname}">admin</td>
                        <td th:text="${user.name}">管理员</td>
                        <td th:text="${user.email != null ? user.email : '-'}">-</td>
                        <td>
                            <span class="badge bg-success" th:if="${user.status == 0}">正常</span>
                            <span class="badge bg-danger" th:if="${user.status != 0}">禁用</span>
                        </td>
                        <td>
                                    <span th:each="role : ${user.roles}" class="badge bg-primary role-badge"
                                          th:text="${role.name}">角色1</span>
                        </td>
                        <td>
                            <!-- 正确：外层循环角色，内层循环菜单 -->
                            <div th:each="role : ${user.roles}">
        <span th:each="menu : ${role.menus}"
              class="badge bg-secondary menu-item" th:text="${menu.name}">菜单1</span>
                            </div>
                        </td>
                    </tr>
                    <!-- 无结果提示 -->
                    <tr th:if="${userList == null or userList.isEmpty()}">
                        <td colspan="7" class="text-center text-muted">没有查询到符合条件的用户</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页控件（已修复Thymeleaf表达式） -->
        <nav th:if="${total != null and total > 0}" class="mt-3">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${query.pageNum == 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/user/comprehensive(username=${query.username}, email=${query.email}, status=${query.status}, pageNum=1)}">首页</a>
                </li>
                <li class="page-item" th:classappend="${query.pageNum == 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/user/comprehensive(username=${query.username}, email=${query.email}, status=${query.status}, pageNum=${query.pageNum - 1})}">上一页</a>
                </li>
                <li class="page-item active">
                    <span class="page-link" th:text="${query.pageNum}">1</span>
                </li>
                <li class="page-item" th:classappend="${query.pageNum == totalPages ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/user/comprehensive(username=${query.username}, email=${query.email}, status=${query.status}, pageNum=${query.pageNum + 1})}">下一页</a>
                </li>
                <li class="page-item" th:classappend="${query.pageNum == totalPages ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/user/comprehensive(username=${query.username}, email=${query.email}, status=${query.status}, pageNum=${totalPages})}">末页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>